a_1_1_1_7_1_component_data={
  template: `
  <div :key="k">
    <div v-for="(data_info, index) in data.data" :key="index" class="a_1_1_1_7_1_row" :style="{
                                width: data.table_width,
                                height: data.body_height,
                                color: data.head_color,
                                backgroundColor: data.body_ground,
                              }">
        ###replace###
    </div>
  </div>
`,  
// template: `
//   <div :key="k">
//   <div v-for="(header, index) in data.data" :key="index" class="a_1_1_1_7_1_row" :style="{
//                               width: data.table_width,
//                               height: data.body_height,
//                               color: data.head_color,
//                               backgroundColor: data.body_ground,
//                             }">
//                       ???
//   </div>
// </div>
// `,  
data() {
    return {
      k:'1',
        data:{  
            slot_head:[
              {name:'列1',width:"100"},
              {name:'列2',width:"100"},],
            table_width:'222',
            head_height:"1",//标题高度
            head_color:"1",//标题颜色
            head_size:"1",//标签大小
            head_ground:"1",//标题背景色
            body_height:"50",//内容高度
            body_ground:"1",//内容背景色
          data:[]
        }
    };
},
methods: {
  refresh:function(){
    _this.k=_this.k=='1'?'2':'1';
  }
},
}
window.a_1_1_1_7_1_init_flag_dct={};
window.a_1_1_1_7_1_change_func=function(data){

  // slot_head:_this.deepcopy_data.slot_head||_this.data.slot_head,//列名
  // slot_data:_this.deepcopy_data.slot_data||_this.data.slot_data,//列的内容
  // __only_id:_this.deepcopy_data.__only_id||_this.data.__only_id
  let _this=this;
  _this.father_this=data._this;
  _this.slot_head=data.slot_head;//头
  _this.slot_data=data.slot_data;//身体
  _this.__only_id=data.__only_id;//组件id    id_作者id_文件夹id_项目id_页面id_组件id


  //替换component_data的数据
  _this.change=function(){
    //每个组件 封装一个
    if(!window.a_1_1_1_7_1_init_flag_dct[_this.__only_id]){
      window.a_1_1_1_7_1_init_flag_dct[_this.__only_id]=true;


      let new_dct={};
      for(let k in a_1_1_1_7_1_component_data){
        new_dct[k]=a_1_1_1_7_1_component_data[k];
      }
      // "con2_father_this":None,
      // "con2_idx":None,
      let replace_str='';
      for (let i=0;i<_this.slot_head.length;i++){
        // console.log("_this.slot_data[i]",i,_this.slot_data[i],typeof _this.slot_data[i])
        let slot_str=(_this.slot_data[i]||'').replace(/:con2_idx="con2_idx"/g,`:con2_idx="index"`);
        // console.log("_this.slot_data[i] replace",i,slot_str)
        replace_str=replace_str+`
        
<div class="a_1_1_1_7_1_cell" :style="{width: '${_this.slot_head[i].width}',height:data.body_height}" :edit_slot="index"> <div class="a_1_1_1_7_1_hid">
          ${slot_str}
</div></div>
                     
        `;
        // console.log("_this.slot_data[i] end",i)
      }
      new_dct.template=new_dct.template.replace(`###replace###`,replace_str);
      // console.log('注册组件:','a_1_1_1_7_1_'+_this.__only_id,new_dct)
      Vue.component2('a_1_1_1_7_1_'+_this.__only_id, new_dct);
    }
  }
  _this.change();

  _this.create_new=function(obj){
    let new_dom=document.createElement('a_1_1_1_7_1_'+_this.__only_id);
    new_dom.setAttribute('ref', 'ref_obj');
    new_dom.setAttribute(':deepcopy_data',"deepcopy_data");//初始化vue模板的参数
    new_dom.setAttribute(':all_set_data',"all_set_data");//初始化vue模板的参数
    new_dom.setAttribute(':con2_father_this',"con2_father_this");//初始化vue模板的参数
    console.log("data:",data)
    let vue_dct={'el':new_dom,data:{
      con2_father_this:_this.father_this,
      all_set_data:_this.father_this.all_set_data,
      deepcopy_data:{data:obj.data,
      slot_head:_this.father_this.data.slot_head,
      table_width:_this.father_this.data.table_width,
      head_height:_this.father_this.data.head_height,//标题高度
      head_color:_this.father_this.data.head_color,//标题颜色
      head_size:_this.father_this.data.head_size,//标签大小
      head_ground:_this.father_this.data.head_ground,//标题背景色
      body_height:_this.father_this.data.body_height,//内容高度
      body_ground:_this.father_this.data.body_ground,//内容背景色
    
    }}}
    console.log("data2:")
    obj.tbody.appendChild(new_dom);
    console.log("end:",vue_dct)
    return new Vue(vue_dct);
  }


}
Vue.component2('a_1_1_1_7_1', {
    template: `
                <div class="table-container" ref="father" :style="'background:'+data.body_ground+';'">
                    <div class="a_1_1_1_7_1_table" ref="t_body">
                                    <!-- 表格头部 start -->
                      <div class="a_1_1_1_7_1_row a_1_1_1_7_1_edit_class"
                          :style="{
                                    width: data.table_width,
                                    height: data.head_height,
                                    color: data.head_color,
                                    backgroundColor: data.head_ground,
                                    fontSize: data.head_size
                                  }">
                          <div class="a_1_1_1_7_1_header" v-for="(header, index) in data.slot_head" :key="index"
                              :style="{width: header.width}">{{ header.name }}</div>
                      </div>
                                    <!-- 表格头部 end -->

                                    <!-- 编辑模式下显示的数据 start -->
                      <div class="a_1_1_1_7_1_row a_1_1_1_7_1_edit_class" v-show="data.__style.__edit_flag__"   ref="edit_body"
                      
                      :style="{
                                width: data.table_width,
                                height: data.body_height,
                                color: data.head_color,
                                backgroundColor: data.body_ground,
                              }">
                        <div class="a_1_1_1_7_1_cell"  a_1_1_1_7_1="1" v-for="(header, index) in data.slot_head" :key="index" 
                        :style="{width: header.width,height:data.body_height}"
                        
                        :edit_slot="index"><div class="a_1_1_1_7_1_hid"></div></div>
                      </div>
                                    <!-- 编辑模式下显示的数据 end -->
                    </div>
                    <div class="a_1_1_1_7_1_pagination">
                        <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
                        <span>{{ currentPage }} / {{ totalPages }}</span>
                        <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
                    </div>
                </div>
  `,  
  
  data() {
      return {
        'totalRows':50,
        'perPage':50,
          currentPage: 1,
          headers: Array.from({ length: 20 }, (_, i) => `Header ${i + 1}`),
          rows: [],
          data:{
            __style:{__edit_flag__:false}, 
            slot_head:[
              {name:'列1',width:"100"},
              {name:'列2',width:"100"},],//列名
            slot_data:{},//列的内容
            body_data:[{}],
            table_width:'222',
            head_height:"1",//标题高度
            head_color:"1",//标题颜色
            head_size:"1",//标签大小
            head_ground:"1",//标题背景色
            body_height:"50",//内容高度
            body_ground:"#ffffff",//内容背景色
          }
      };
  },
  watch:{

    "data.body_data": {
      handler(newVal, oldVal) {
        // 当 body_data 发生更改时调用
        try{this.tbody_obj.$refs.ref_obj.data.data=this.data.body_data;


        }catch{}
        
        // this.f();
      },
      deep: true, // 深度监听
      immediate: false // 如果需要在组件创建时立即执行一次监听器，可以设置为 true
    },
    

    "data.slot_head": {
      handler(newVal, oldVal) {
        let width=0;
        for(let i=0;i<this.data.slot_head.length;i++){
          width=width+Number(this.data.slot_head[i].width);
        }
        console.log("新的width:",width);
        this.data.table_width=width;
        try{this.tbody_obj.data.table_width=width}catch{}
      },
      deep: true, // 深度监听
      immediate: false // 如果需要在组件创建时立即执行一次监听器，可以设置为 true
    }
  },
  computed: {
      startIndex() {
          return (this.currentPage - 1) * this.perPage;
      },
      endIndex() {
          return this.startIndex + this.perPage;
      },
      paginatedRows() {
          return this.generateRows().slice(this.startIndex, this.endIndex);
      },
      totalPages() {
          return Math.ceil(this.totalRows / this.perPage);
      }
  },
  methods: {
          //删除之前显示的插槽
          con_del:function(){
            try{
                this.old_con_dom.parentNode.removeChild(this.old_con_dom);}catch{}
          },
          con_add:function(obj){
            this.$nextTick(() => {
              this.con_add2(obj);
            })
          },
          //显示当前的插槽
          con_add2:function(obj){
            console.log("a_1_1_1_7_1显示插槽内容",obj)
            let dom=obj.dom;
            let ref=obj.ref;
            // console.log("初始化容器","新建一个dom");
            let new_dom=document.createElement('div');
            new_dom.setAttribute('miaobian','1');
            new_dom.innerHTML="<div style='height:100%;width:10px;background:red;z-index: 9999;'></div>"
          if (dom !== null) {
            this.return_slot_dom(ref).insertBefore(new_dom, dom);
          } else {
            // 如果 child_dom 是 null，则将新元素添加到 father_dom 的末尾
            this.return_slot_dom(ref).appendChild(new_dom);
          }
          this.con_del();
          this.old_con_dom=new_dom;
          },
          return_slot_dom:function(ref){
            return this.$refs['edit_body'].children[ref].children[0];
          },
          check_slot_find:function(dom){
            
            let childNodes = dom.parentNode.children;
            
            // 遍历子节点，寻找目标节点的索引位置
            let index = -1;
            for (let i = 0; i < childNodes.length; i++) {
              if (childNodes[i] === dom) {
                index = i;
                break;
              }
            }
            return index;
          },
          //查找 要插入的组件 位于哪一个插槽
          check_slot(dom){
            console.log("a_1_1_1_7_1开始匹配ref")
            while(1){
                if(dom==this.$refs.father){
                  console.log("匹配到根dom,不在可插槽位置,返回null")
                  return null}
                else if(dom==this.$refs.body){
                  console.log("匹配到中间dom,不在可插槽位置,返回null")
                  return null}
                else if(dom.getAttribute('a_1_1_1_7_1')=='1'){
                  let ref=this.check_slot_find(dom);
                  console.log("匹配插槽,返回ref:",ref)
                    // console.log("return body")
                    return ref+'';
                  
                  }
                else{dom=dom.parentNode}
            }
          },
      模拟数据() {
          return Array.from({ length: this.totalRows }, (_, i) => 
              Array.from({ length: 10 }, (_, j) => `Row ${i + 1} Col ${j + 1}`)
          );
      },
      changePage(page) {
          if (page >= 1 && page <= this.totalPages) {
              this.currentPage = page;
          }
      },
      //刷新数据
      refresh:function(new_data=null){

        let _this=this;
          // 使用 $nextTick 来等待 DOM 更新
          this.$nextTick(() => {
            // 现在 DOM 已经更新，可以安全地访问或修改 myElement
                if(new_data){this.data.body_data=new_data;}
                let tbody = this.$refs.t_body;
                let childrenArray = tbody.children; // 只保留元素节点

                // 从数组的最后一个元素向前遍历
                for (let i = childrenArray.length - 1; i >= 0; i--) {
                  let child = childrenArray[i];
                  if (!child.classList.contains('a_1_1_1_7_1_edit_class')) {
                    tbody.removeChild(child); // 删除不符合条件的节点
                  }
                }
                if(_this.data.__style.__edit_flag__==true){return}//编辑模式下不显示数据
                console.log("create1")
                _this.tbody_obj=_this.data.__slot_obj.create_new({tbody,data:_this.data.body_data});
                _this.tbody_obj.$nextTick(()=>{
                  let vue_obj=_this.tbody_obj.$refs.ref_obj;
// // 将con2 容器的子组件 在初始化的时候将this传递给con2容器 start
// _this.fast_child={};
// if(_this.con2_idx!='null'){
// let f=_this.con2_father_this.fast_child;
// if(!f[_this.con2_idx]){f[_this.con2_idx]={}}
// let f_lst=_this.deepcopy_data.__only_id.split("_");
// f[_this.con2_idx][f_lst[f_lst.length-1]]=_this;
// // 将con2 容器的子组件 在初始化的时候传递给con2容器   end
                    vue_obj.$nextTick(()=>{
                      let body_data=null;
                    if(!_this.first_refresh){
                      _this.first_refresh=true;
                      body_data=_this.deepcopy_data.body_data;
                    }else{  
                      body_data=_this.data.body_data;
                    }
                    let body_keys=Object.keys(_this.data.__father_data);
                    let new_keys={};
                    for (let i=0;i<body_keys.length;i++){
                      let k_lst=body_keys[i].split("_");
                      new_keys[k_lst[k_lst.length-1]]=body_keys[i];
                    }
                    try{
                      
                    for(let i=0;i<body_data.length;i++){
                      let data=body_data[i];
                      console.log("开始同步第",i,"条数据",new_keys,data);
                      for(let key in new_keys){
                        try{lhp_deepcopy1(_this.fast_child[i][key].data,data[key]);}catch (err){}
                        
                      }
                    }
                    }catch{}
                  })
                })
                console.log("create2")
          });
      }
  },
  
  mounted() {
    this.data.body_data = this.模拟数据();
    //计算表格宽度
    let slot_head=_this.deepcopy_data.slot_head||_this.data.slot_head;
    let width=0;
    for(let i=0;i<slot_head.length;i++){
      width=width+Number(slot_head[i].width);
    }
    _this.data.table_width=width;
    _this.data.__slot_obj=new a_1_1_1_7_1_change_func({
      slot_head:_this.deepcopy_data.slot_head||_this.data.slot_head,//列名
      slot_data:_this.deepcopy_data.slot_data||_this.data.slot_data,//列的内容
      __only_id:_this.deepcopy_data.__only_id||_this.data.__only_id,
      _this:_this
    });
    try{
      if(window.component2_edit_flag==false){
        console.log("refresh 1")
        _this.refresh();
        console.log("refresh 2")
      }

    }catch{}
  }
  }
  );
